<template>
  <t-dialog
      header="新增请求"
      :visible.sync="showDialogAdd"
      @confirm="onConfirm"
      width='70%'
    >
    <t-space size="32px">
    <t-form
      :data="formData"
      labelWidth="calc(2em + 100px)"
      labelAlign="right"
      Align="right"
      :rules="formRules"
      :layout="layout"
      ref="form"
      scrollToFirstError="smooth"
    >
      <t-form-item label="请求名称" name="request_name">
        <t-input v-model="formData.request_name" placeholder="请输入请求名称" ></t-input>
      </t-form-item>
      <t-form-item label="客户端类型" name="custom_type">
        <t-select
          v-model="formData.custom_type"
          :style="{ width: '222px' }"
          class="demo-select-base"
          placeholder="请选择类型"
          clearable
        >
          <t-option value="1" label="java-sdk">cmc</t-option>
          <t-option value="2" label="go-sdk">go-sdk</t-option>
          <t-option value="3" label="java-sdk">java-sdk</t-option>
        </t-select>
      </t-form-item>
      <t-form-item label="合约类型" name="contr_type">
        <t-select
          v-model="formData.chain_name"
          :style="{ width: '222px' }"
          class="demo-select-base"
          placeholder="请选择类型"
          clearable
        >
          <t-option value="1" label="系统合约">系统合约</t-option>
          <t-option value="2" label="用户合约">用户合约</t-option>
        </t-select>
      </t-form-item>
      <t-row :gutter="[16, 24]" :style="{ marginBottom: '12px' }">
        <t-col >
          <t-form-item label="选择合约" name="testplan_name" layout="inline">
            <t-select
              v-model="formData.testplan_name"
              :style="{ width: '222px' }"
              placeholder="请选择类型"
              class="demo-select-base"
              clearable
            >
              <t-option value="1" label="合约1">合约1</t-option>
              <t-option value="2" label="合约2">合约2</t-option>
              <t-option value="3" label="合约3">合约3</t-option>
            </t-select>
          </t-form-item>
        </t-col>
        <t-col >虚拟机类型：Wasmer</t-col>
      </t-row>
      
      <t-form-item label="合约方法" name="agent_name" layout="inline">
        <t-select
          v-model="formData.agent_name"
          :style="{ width: '222px' }"
          placeholder="请选择类型"
          class="demo-select-base"
          clearable
        >
          <t-option v-for="(item, index) in AGENT_NAME_OPTIONS" :key="index + item.path" :value="item.value" :label="item.label">
            {{ item.label }}
          </t-option>
        </t-select>
      </t-form-item>
      <t-form-item label="合约入参" name="service" layout="inline">
        <t-textarea :placeholder="placeholder" :autosize="{ minRows: 5, maxRows: 10 }" />
      </t-form-item>
      <t-form-item label="超时时间" name="request_name">
        <t-input v-model="formData.request_name" placeholder="请输入请求名称" suffix="ms"></t-input>
      </t-form-item>
      <t-form-item label="响应断言(选填)" name="service" layout="inline">
        <t-textarea placeholder="success" :autosize="{ minRows: 5, maxRows: 10 }" />
      </t-form-item>
    </t-form>
  </t-space>
  </t-dialog>
</template>

<script lang="jsx">
// import { operateChainConn } from '@/api/requestApi';
import dayjs from 'dayjs';
import {
  CHAIN_NAME_OPTIONS,
  TESTPLAN_NAME_OPTIONS,
  AGENT_NAME_OPTIONS,
  SERVICE_NAME_OPTIONS,
} from '@/service/service-detail';


const INITIAL_FORM_DATA = {
  request_name: '',
  testplan_name: '',
  chain_name: '',
  agent_name: '',
  service: '',
  start_time: '',
  finish_time: '',
  custom_type: '',
};
const FORM_RULES = {
  request_name: [{ required: true, message: '请输入请求名称', type: 'error' }],
  testplan_name: [{ required: true, message: '请输入测试计划名称', type: 'error' }],
  chain_name: [{ required: true, message: '请输入链名称', type: 'error' }],
  agent_name: [{ required: true, message: '请输入代理名称', type: 'error' }],
  service: [{ required: true, message: '请输入注册服务', type: 'error' }],
  start_time: [{ required: true, message: '请输入开始采集时间', type: 'error' }],
  finish_time: [{ required: true, message: '请输入结束采集时间', type: 'error' }],
};

export default {
  name: 'AddDialogComp',
  // components: {
  //   Icon,
  // },
  props: {
    showChildDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {    
      CHAIN_NAME_OPTIONS,
      TESTPLAN_NAME_OPTIONS,
      AGENT_NAME_OPTIONS,
      SERVICE_NAME_OPTIONS,
      dayjs,
      layout: 'vertical', // 行内布局
      formData: {...INITIAL_FORM_DATA},
      formRules: {...FORM_RULES},
      placeholder:  `{
        id:"id_0_0_{random,20}",
        hash:"h_0_0_{random,20}",
        metadata:{
          hashType:"file",
          hashAlgorithm:"hash_{metadata}",
          username:"taifu",
          timestamp:"1672048892",
          proveTimestamp:""
        }
      }"`
    };
  },
  
  computed: {
    showDialogAdd: {
      get() {
        return this.showChildDialog
      },
      set(newValue) {
        this.$emit('update:showChildDialog', newValue) // 触发更新事件，父组件的showDialogAdd会自动更新
      }
    },
    timePickerProps() {
      return {
        disableTime: () => {
          if (this.pickDate === dayjs().format('YYYY-MM-DD')) {
            return {
              hour: [0, 1, 2, 3, 4, 5, 6],
            };
          }
          return {};
        },
      };
    },
  },
  // mounted() {
  //   this.formData.node_list = [{ node_name: '', node_ipaddr: '' }];
  //   // this.$refs.formValidatorStatus.validate();
  // },
  methods: {
    // init(data) {
    //   // this.showDialogAdd=true;
    //   // data是父组件弹窗传递过来的值，我们可以打印看看
    //   this.formData = data;
    //   console.log('来自父组件的', data);
    // },

    onConfirm() {
      console.log('formData--->',this.formData)
      const reqParam = {"ids": [''], "param": {}, "op_type": ''};
      reqParam.param = this.formData;
      reqParam.op_type = 1;
      console.log("提交的表单内容", reqParam);
      this.showDialogAdd = false;
    //   operateChainConn(reqParam)
    //     .then((res) => {
    //       if (res.data.code === '000') {
    //         this.$message.success('链连接创建成功');
    //       }
    //     })
    //     .catch((e) => {
    //       this.$message.error('系统异常');
    //       console.log(e);
    //     })
    //     .finally(() => {
    //       this.dataLoading = false;
    //     });
    //   this.formData.node_list = [{ node_name: '', node_ipaddr: '' }];
    //   this.showDialogAdd = false;
    //   // 刷新父页面
    //   this.$emit('addFlush')
    },
  },
  
};
</script>

<style lang="less" scoped>

</style>
